// 原生JavaScript实现
(function () {
  // 轮播图配置
  const bannerSize = 3;
  let bannerIndex = 0;
  let autoPlayInterval;

  // 菜单配置
  const menuList = [
    {
      title: "电子产品",
      list: [
        {
          menu_title: "手机",
          menus: ["iPhone", "华为", "小米", "OPPO"],
        },
        {
          menu_title: "电脑",
          menus: ["MacBook", "联想", "戴尔", "华硕"],
        },
      ],
    },
    {
      title: "服装",
      list: [
        {
          menu_title: "上衣",
          menus: ["T恤", "衬衫", "毛衣", "外套"],
        },
        {
          menu_title: "裤子",
          menus: ["牛仔裤", "休闲裤", "运动裤", "短裤"],
        },
      ],
    },
  ];

  let menuItemIndex = -1;
  let subMenuTimeout;

  // DOM元素引用
  const banner = document.getElementById("banner");
  const dotsContainer = document.getElementById("dotsContainer");
  const prevBtn = document.getElementById("prevBtn");
  const nextBtn = document.getElementById("nextBtn");
  const menuContent = document.getElementById("menuContent");
  const subMenu = document.getElementById("subMenu");

  // 初始化轮播图
  function initBanner() {
    // 创建轮播项
    for (let i = 0; i < bannerSize; i++) {
      const slide = document.createElement("div");
      slide.className = `banner-slide slide${i + 1}`;
      banner.appendChild(slide);
    }

    // 创建指示器
    for (let i = 0; i < bannerSize; i++) {
      const dot = document.createElement("span");
      dot.addEventListener("click", () => changeBanner(i));
      dotsContainer.appendChild(dot);
    }

    updateBanner();
  }

  // 初始化菜单
  function initMenu() {
    // 创建主菜单项
    menuList.forEach((item, index) => {
      const menuItem = document.createElement("div");
      menuItem.className = "menu-item";
      menuItem.innerHTML = `
        <a href="">
          <span>${item.title}</span>
          <i class="fa fa-angle-right"></i>
        </a>
      `;
      menuItem.addEventListener("mouseover", () => showSubMenu(index));
      menuContent.appendChild(menuItem);
    });

    // 创建子菜单内容
    menuList.forEach((item, index) => {
      const innerBox = document.createElement("div");
      innerBox.className = "inner-box";
      innerBox.innerHTML = `
        <div class="sub-inner-box">
          <div class="title">${item.title}</div>
          <!-- 子菜单内容将动态生成 -->
        </div>
      `;
      subMenu.appendChild(innerBox);

      // 创建子菜单行
      item.list.forEach((listItem) => {
        const subRow = document.createElement("div");
        subRow.className = "sub-row";
        subRow.innerHTML = `<span class="bold">${listItem.menu_title} :</span>`;

        listItem.menus.forEach((menu) => {
          const menuLink = document.createElement("a");
          menuLink.className = "menu";
          menuLink.href = "";
          menuLink.textContent = menu;
          subRow.appendChild(menuLink);
        });

        innerBox.querySelector(".sub-inner-box").appendChild(subRow);
      });
    });
  }

  // 更新轮播图显示
  function updateBanner() {
    // 更新轮播项显示
    const slides = banner.querySelectorAll(".banner-slide");
    slides.forEach((slide, index) => {
      slide.classList.toggle("slide-active", index === bannerIndex);
    });

    // 更新指示器
    const dots = dotsContainer.querySelectorAll("span");
    dots.forEach((dot, index) => {
      dot.classList.toggle("dot-active", index === bannerIndex);
    });
  }

  // 切换到指定轮播图
  function changeBanner(index) {
    bannerIndex = index;
    updateBanner();
  }

  // 上一张轮播图
  function prevBanner() {
    bannerIndex = (bannerIndex - 1 + bannerSize) % bannerSize;
    updateBanner();
  }

  // 下一张轮播图
  function nextBanner() {
    bannerIndex = (bannerIndex + 1) % bannerSize;
    updateBanner();
  }

  // 显示子菜单
  function showSubMenu(index) {
    clearTimeout(subMenuTimeout);
    menuItemIndex = index;

    // 更新子菜单显示
    const innerBoxes = subMenu.querySelectorAll(".inner-box");
    innerBoxes.forEach((box, i) => {
      box.style.display = i === index ? "block" : "none";
    });

    subMenu.classList.remove("hide");
  }

  // 隐藏子菜单
  function hideSubMenu() {
    subMenuTimeout = setTimeout(() => {
      subMenu.classList.add("hide");
    }, 200);
  }

  // 自动播放轮播图
  function startAutoPlay() {
    autoPlayInterval = setInterval(nextBanner, 3000);
  }

  // 停止自动播放
  function stopAutoPlay() {
    clearInterval(autoPlayInterval);
  }

  // 初始化所有功能
  function init() {
    initBanner();
    initMenu();

    // 绑定事件监听器
    prevBtn.addEventListener("click", prevBanner);
    nextBtn.addEventListener("click", nextBanner);
    banner.addEventListener("mouseover", stopAutoPlay);
    banner.addEventListener("mouseout", startAutoPlay);
    subMenu.addEventListener("mouseover", () => showSubMenu(-1));
    subMenu.addEventListener("mouseout", hideSubMenu);

    // 开始自动播放
    startAutoPlay();
  }

  // 页面加载完成后初始化
  window.addEventListener("DOMContentLoaded", init);
})();
